<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Two Arcs Circle with Text</title>
    <style>
      canvas {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
      function drawTwoArcCircleWithText(
        canvasElement,
        radius,
        arcColor1,
        arcColor2,
        arcPercentage1,
        arcPercentage2,
        lineWidth,
        fontData,
        fontSize,
        text
      ) {
        const ctx = canvasElement.getContext('2d');

        const centerX = canvasElement.width / 2;
        const centerY = canvasElement.height / 2;

        const totalCircumferenceRads = 2 * Math.PI;
        const arc1Angle = (arcPercentage1 / 100) * totalCircumferenceRads;
        const arc2Angle = (arcPercentage2 / 100) * totalCircumferenceRads;

        // Draw the first arc
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, arc1Angle, false);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = arcColor1;
        ctx.stroke();

        // Draw the second arc, continuing from where the first arc ended
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, arc1Angle, arc1Angle + arc2Angle, false);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = arcColor2;
        ctx.stroke();

        // Text properties
        ctx.font = `${fontSize}px ${fontData}`;
        ctx.fillStyle = '#000'; // Set the text color to black

        // Measure the text dimensions
        const textMetrics = ctx.measureText(text);
        const textWidth = textMetrics.width;
        const textHeight = fontSize;

        // Center the text horizontally and vertically within the circle
        const textX = centerX - textWidth / 2;
        const textY = centerY + textHeight / 2;

        // Draw the text
        ctx.fillText(text, textX, textY);
      }

      // Example usage:
      const canvas = document.getElementById('myCanvas');
      const radius = 30;
      const arcColor1 = '#FF69B4';
      const arcColor2 = '#00FFFF';
      const arcPercentage1 = 30;
      const arcPercentage2 = 70;
      const lineWidth = 20;
      const fontData = 'Arial, sans-serif';
      const fontSize = 15;
      const text = '70%';

      drawTwoArcCircleWithText(
        canvas,
        radius,
        arcColor1,
        arcColor2,
        arcPercentage1,
        arcPercentage2,
        lineWidth,
        fontData,
        fontSize,
        text
      );
    </script>
  </body>
</html>
